<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI内容可靠性检测系统</title>
    <!-- Bootstrap CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" onerror="this.onerror=null;this.href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css';">
    <!-- Font Awesome 图标 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- 自定义样式 - 版本: 2025-08-17-橙黄色主题 -->
    <style>
        :root {
            --primary-color: #ff8c42;
            --primary-dark: #e67e22;
            --secondary-color: #64748b;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --info-color: #06b6d4;
            --light-bg: #f8fafc;
            --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #ff8c42 0%, #ffb347 100%);
            min-height: 100vh;
            color: #1e293b;
            line-height: 1.6;
        }

        .main-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            margin: 2rem auto;
            max-width: 1200px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }

        .nav-tabs {
            border: none;
            background: var(--light-bg);
            padding: 0 2rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .nav-tabs .nav-link {
            border: none;
            color: var(--secondary-color);
            font-weight: 500;
            padding: 1rem 1.5rem;
            border-radius: 0;
            transition: var(--transition);
            position: relative;
        }

        .nav-tabs .nav-link:hover {
            color: var(--primary-color);
            background: transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            background: white;
            border-bottom: 3px solid var(--primary-color);
        }

        .nav-tabs .nav-link i {
            margin-right: 0.5rem;
        }

        .tab-content {
            padding: 2rem;
            background: white;
        }

        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .card-header {
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
            border-bottom: 1px solid #e2e8f0;
            padding: 1.5rem;
            font-weight: 600;
            color: #374151;
        }

        .card-body {
            padding: 2rem;
        }

        .form-label {
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
        }

        .form-label i {
            margin-right: 0.5rem;
            color: var(--primary-color);
        }

        .form-control {
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            transition: var(--transition);
            background: #f8fafc;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
            background: white;
        }

        .form-control::placeholder {
            color: #9ca3af;
        }

        .btn {
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--primary-dark), #d35400);
            transform: translateY(-1px);
            box-shadow: 0 10px 15px -3px rgba(255, 140, 66, 0.3);
        }

        .btn-outline-secondary {
            border: 2px solid #e2e8f0;
            color: var(--secondary-color);
            background: white;
        }

        .btn-outline-secondary:hover {
            background: var(--light-bg);
            border-color: var(--secondary-color);
            color: var(--secondary-color);
        }

        .progress {
            height: 12px;
            border-radius: 6px;
            background: #e2e8f0;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }

        .progress-bar {
            border-radius: 6px;
            transition: width 1s ease-in-out;
            position: relative;
        }

        .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .badge {
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .result-card {
            margin-top: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid #e2e8f0;
        }

        .metric-card {
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            border: 1px solid #e2e8f0;
        }

        .metric-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .metric-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e293b;
        }

        .info-box {
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 8px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .warning-box {
            background: #fffbeb;
            border: 1px solid #fcd34d;
            border-radius: 8px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .success-box {
            background: #f0fdf4;
            border: 1px solid #86efac;
            border-radius: 8px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .removed-section {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 6px;
            padding: 0.75rem;
            margin: 0.5rem 0;
            border-left: 4px solid var(--danger-color);
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }
            
            .tab-content {
                padding: 1rem;
            }
            
            .card-body {
                padding: 1.5rem;
            }
            
            .nav-tabs {
                padding: 0 1rem;
            }
            
            .nav-tabs .nav-link {
                padding: 0.75rem 1rem;
                font-size: 0.875rem;
            }
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 页面头部 -->
        <div class="header">
            <h1><i class="fas fa-shield-alt"></i> AI内容可靠性检测系统</h1>
            <p>智能分析内容可信度，识别AI生成内容，评估信息可靠性</p>
        </div>
        
        <!-- 导航标签 -->
        <ul class="nav nav-tabs" id="mainTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="detect-tab" data-bs-toggle="tab" data-bs-target="#detect" type="button" role="tab">
                    <i class="fas fa-search"></i> 综合内容检测
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="ai-tab" data-bs-toggle="tab" data-bs-target="#ai" type="button" role="tab">
                    <i class="fas fa-robot"></i> 专业AI检测
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="url-tab" data-bs-toggle="tab" data-bs-target="#url" type="button" role="tab">
                    <i class="fas fa-link"></i> URL分析
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="sources-tab" data-bs-toggle="tab" data-bs-target="#sources" type="button" role="tab">
                    <i class="fas fa-sources"></i> 来源提取
                </button>
            </li>
        </ul>
                
                <!-- 标签页内容 -->
                <div class="tab-content" id="mainTabsContent">
                    <!-- 内容检测标签页 -->
                    <div class="tab-pane fade show active" id="detect" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="fas fa-search"></i> 综合内容检测</h5>
                                <p class="mb-0 text-muted">全面分析内容可靠性，包括AI检测、信息验证、内容过滤等功能</p>
                            </div>
                            <div class="card-body">
                                <form id="detectForm">
                                    <div class="mb-4">
                                        <label for="content" class="form-label">
                                            <i class="fas fa-file-text"></i> 待检测内容
                                        </label>
                                        <textarea class="form-control" id="content" rows="8" 
                                            placeholder="请输入要检测的内容，系统将进行全面的可靠性分析，包括AI生成检测、信息验证、内容过滤等..."></textarea>
                                    </div>
                                    
                                    <div class="mb-4">
                                        <label for="sources" class="form-label">
                                            <i class="fas fa-link"></i> 信息来源（可选，每行一个）
                                        </label>
                                        <textarea class="form-control" id="sources" rows="4" 
                                            placeholder="https://example.com/article1&#10;https://arxiv.org/abs/2023.12345&#10;https://www.researchgate.net/publication/..."></textarea>
                                        <div class="form-text">
                                            <i class="fas fa-info-circle"></i> 添加信息来源可以提高检测准确性
                                        </div>
                                    </div>
                                    
                                    <div class="mb-4">
                                        <label class="form-label">
                                            <i class="fas fa-upload"></i> 或上传本地文档
                                        </label>
                                        <div class="input-group">
                                            <input type="file" class="form-control" id="documentFile" 
                                                   accept=".txt,.md,.pdf,.docx,.doc,.xlsx,.xls,.csv,.json,.xml,.html,.htm">
                                            <button type="button" class="btn btn-outline-secondary" id="uploadBtn">
                                                <i class="fas fa-upload"></i> 上传文档
                                            </button>
                                        </div>
                                        <div class="form-text">
                                            <i class="fas fa-file-alt"></i> 支持格式: .txt, .md, .pdf, .docx, .doc, .xlsx, .xls, .csv, .json, .xml, .html
                                        </div>
                                    </div>
                                    
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-play"></i> 开始检测
                                    </button>
                                </form>
                            </div>
                        </div>
                
                        <div id="resultCard" class="card result-card fade-in mt-4" style="display: none;">
                            <div class="card-header">
                                <h5><i class="fas fa-chart-bar"></i> 综合检测结果</h5>
                                <p class="mb-0 text-muted">包含AI检测、可靠性评估、内容过滤等多项分析结果</p>
                            </div>
                            <div class="card-body">
                                <!-- 主要指标 -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <div class="metric-card">
                                            <div class="metric-title">
                                                <i class="fas fa-robot"></i> AI生成概率
                                            </div>
                                            <div class="progress mb-2">
                                                <div id="aiProgress" class="progress-bar" role="progressbar"></div>
                                            </div>
                                            <div id="aiProbability" class="metric-value"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="metric-card">
                                            <div class="metric-title">
                                                <i class="fas fa-shield-alt"></i> 可靠性评分
                                            </div>
                                            <div class="progress mb-2">
                                                <div id="reliabilityProgress" class="progress-bar" role="progressbar"></div>
                                            </div>
                                            <div id="reliabilityScore" class="metric-value"></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 内容类型 -->
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <div class="metric-card">
                                            <div class="metric-title">
                                                <i class="fas fa-tag"></i> 内容类型
                                            </div>
                                            <span id="contentType" class="badge bg-info"></span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 过滤后的内容 -->
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <div class="metric-card">
                                            <div class="metric-title">
                                                <i class="fas fa-filter"></i> 过滤后的内容
                                            </div>
                                            <div id="filteredContent" class="info-box"></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 移除的部分 -->
                                <div id="removedSections" class="row mb-4" style="display: none;">
                                    <div class="col-12">
                                        <div class="metric-card">
                                            <div class="metric-title">
                                                <i class="fas fa-trash"></i> 移除的部分
                                            </div>
                                            <div id="removedList"></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 信息来源 -->
                                <div id="sourceInfo" class="row mb-4" style="display: none;">
                                    <div class="col-12">
                                        <div class="metric-card">
                                            <div class="metric-title">
                                                <i class="fas fa-sources"></i> 提取的信息来源
                                            </div>
                                            <div id="sourceContent" class="info-box"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
                <!-- AI检测标签页 -->
                <div class="tab-pane fade" id="ai" role="tabpanel">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-robot"></i> 专业AI内容检测</h5>
                            <p class="mb-0 text-muted">使用先进的AI检测技术，专门识别内容是否由大语言模型生成</p>
                        </div>
                        <div class="card-body">
                            <form id="aiForm">
                                <div class="mb-4">
                                    <label for="aiContent" class="form-label">
                                        <i class="fas fa-file-text"></i> 要检测的内容
                                    </label>
                                    <textarea class="form-control" id="aiContent" rows="8" 
                                              placeholder="请输入要检测的内容，系统将使用专业的AI检测技术分析其是否为AI生成..."></textarea>
                                    <div class="form-text">
                                        <i class="fas fa-info-circle"></i> 专门用于AI内容检测，使用朱雀AI进行专业分析，检测精度更高
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> 检测AI内容
                                </button>
                            </form>
                            
                            <div id="aiResultCard" class="card result-card fade-in mt-4" style="display: none;">
                                <div class="card-header">
                                    <h6><i class="fas fa-chart-line"></i> AI检测结果</h6>
                                    <p class="mb-0 text-muted">专业的AI内容检测分析结果</p>
                                </div>
                                <div class="card-body">
                                    <div class="row mb-4">
                                        <div class="col-md-6">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-robot"></i> AI生成概率
                                                </div>
                                                <div class="progress mb-2">
                                                    <div id="aiDetectProgress" class="progress-bar" role="progressbar"></div>
                                                </div>
                                                <div id="aiDetectProbability" class="metric-value"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-bullseye"></i> 检测置信度
                                                </div>
                                                <div class="progress mb-2">
                                                    <div id="aiConfidenceProgress" class="progress-bar" role="progressbar"></div>
                                                </div>
                                                <div id="aiConfidenceScore" class="metric-value"></div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-tag"></i> 内容类型
                                                </div>
                                                <span id="aiContentType" class="badge bg-info"></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-cogs"></i> 检测方法
                                                </div>
                                                <div id="aiDetectionMethod" class="info-box"></div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-info-circle"></i> 详细信息
                                                </div>
                                                <div id="aiDetails" class="info-box"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- URL分析标签页 -->
                <div class="tab-pane fade" id="url" role="tabpanel">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-link"></i> URL内容分析</h5>
                            <p class="mb-0 text-muted">智能分析网页内容，提取关键信息，评估可靠性</p>
                        </div>
                        <div class="card-body">
                            <form id="urlForm">
                                <div class="mb-4">
                                    <label for="urlInput" class="form-label">
                                        <i class="fas fa-globe"></i> 要分析的URL
                                    </label>
                                    <input type="url" class="form-control" id="urlInput" 
                                           placeholder="https://example.com/article" required>
                                    <div class="form-text">
                                        <i class="fas fa-info-circle"></i> 系统将自动抓取和分析网页内容，评估其可靠性
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> 分析URL内容
                                </button>
                            </form>
                            
                            <div id="urlResultCard" class="card result-card fade-in mt-4" style="display: none;">
                                <div class="card-header">
                                    <h6><i class="fas fa-chart-pie"></i> URL分析结果</h6>
                                </div>
                                <div class="card-body">
                                    <!-- 网页基本信息 -->
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-file-text"></i> 网页信息
                                                </div>
                                                <div id="urlContentInfo" class="info-box"></div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 可靠性评分 -->
                                    <div class="row mb-4">
                                        <div class="col-md-6">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-shield-alt"></i> 可靠性评分
                                                </div>
                                                <div class="progress mb-2">
                                                    <div id="urlReliabilityProgress" class="progress-bar" role="progressbar"></div>
                                                </div>
                                                <div id="urlReliabilityScore" class="metric-value"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-robot"></i> AI生成概率
                                                </div>
                                                <div class="progress mb-2">
                                                    <div id="urlAiProgress" class="progress-bar" role="progressbar"></div>
                                                </div>
                                                <div id="urlAiScore" class="metric-value"></div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 关键信息提取 -->
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-key"></i> 关键信息提取
                                                </div>
                                                <div id="urlKeyInfo" class="info-box"></div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 内容摘要 -->
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <div class="metric-card">
                                                <div class="metric-title">
                                                    <i class="fas fa-align-left"></i> 内容摘要
                                                </div>
                                                <div id="urlSummary" class="info-box"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 来源提取标签页 -->
                <div class="tab-pane fade" id="sources" role="tabpanel">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-sources"></i> 信息来源提取</h5>
                        </div>
                        <div class="card-body">
                            <form id="sourcesForm">
                                <div class="mb-3">
                                    <label for="sourcesContent" class="form-label">要提取来源的内容</label>
                                    <textarea class="form-control" id="sourcesContent" rows="6" 
                                              placeholder="请输入要提取信息来源的内容..."></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">提取信息来源</button>
                            </form>
                            
                            <div id="sourcesResultCard" class="card result-card mt-3" style="display: none;">
                                <div class="card-header">
                                    <h6>提取结果</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <h6>置信度评分</h6>
                                            <div class="progress mb-3">
                                                <div id="sourcesConfidenceProgress" class="progress-bar" role="progressbar"></div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <h6>提取的URL</h6>
                                            <div id="sourcesUrls" class="border p-3 bg-light rounded"></div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <h6>提取的引用</h6>
                                            <div id="sourcesCitations" class="border p-3 bg-light rounded"></div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <h6>学术来源</h6>
                                            <div id="sourcesAcademic" class="border p-3 bg-light rounded"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="/static/js/bootstrap.bundle.min.js" onerror="this.onerror=null;this.src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js';"></script>
    <!-- 备用CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js';"></script>
    
    <script>
        // 文档上传处理
        document.getElementById('uploadBtn').addEventListener('click', async function() {
            const fileInput = document.getElementById('documentFile');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请选择要上传的文档');
                return;
            }
            
            // 显示加载状态
            const uploadBtn = this;
            uploadBtn.disabled = true;
            uploadBtn.textContent = '上传中...';
            
            try {
                const formData = new FormData();
                formData.append('file', file);
                
                const response = await fetch('/api/detect/document', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (response.ok) {
                    displayResult(result);
                    // 清空文件输入
                    fileInput.value = '';
                } else {
                    alert('文档检测失败: ' + result.error);
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            } finally {
                uploadBtn.disabled = false;
                uploadBtn.textContent = '上传文档';
            }
        });
        
        document.getElementById('detectForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const content = document.getElementById('content').value;
            const sourcesText = document.getElementById('sources').value;
            const sources = sourcesText.split('\n').filter(s => s.trim());
            
            if (!content.trim()) {
                alert('请输入要检测的内容');
                return;
            }
            
            // 显示加载状态
            const submitBtn = document.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="loading"></span> 检测中...';
            
            try {
                const response = await fetch('/api/detect', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        content: content,
                        sources: sources
                    })
                });
                
                const result = await response.json();
                
                if (response.ok) {
                    displayResult(result);
                } else {
                    alert('检测失败: ' + result.error);
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            } finally {
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        });
        
        function displayResult(result) {
            // 显示结果卡片
            document.getElementById('resultCard').style.display = 'block';
            
            // 更新AI概率
            const aiProgress = document.getElementById('aiProgress');
            const aiProbability = document.getElementById('aiProbability');
            const aiPercent = Math.round(result.ai_probability * 100);
            aiProgress.style.width = aiPercent + '%';
            aiProgress.textContent = aiPercent + '%';
            aiProbability.textContent = `AI生成概率: ${result.ai_probability.toFixed(2)}`;
            
            // 设置进度条颜色
            if (aiPercent > 80) {
                aiProgress.className = 'progress-bar bg-danger';
            } else if (aiPercent > 50) {
                aiProgress.className = 'progress-bar bg-warning';
            } else {
                aiProgress.className = 'progress-bar bg-success';
            }
            
            // 更新可靠性评分
            const reliabilityProgress = document.getElementById('reliabilityProgress');
            const reliabilityScore = document.getElementById('reliabilityScore');
            const reliabilityPercent = Math.round(result.reliability_score * 100);
            reliabilityProgress.style.width = reliabilityPercent + '%';
            reliabilityProgress.textContent = reliabilityPercent + '%';
            reliabilityScore.textContent = `可靠性评分: ${result.reliability_score.toFixed(2)}`;
            
            // 设置可靠性进度条颜色
            if (reliabilityPercent > 70) {
                reliabilityProgress.className = 'progress-bar bg-success';
            } else if (reliabilityPercent > 40) {
                reliabilityProgress.className = 'progress-bar bg-warning';
            } else {
                reliabilityProgress.className = 'progress-bar bg-danger';
            }
            
            // 更新内容类型
            const contentType = document.getElementById('contentType');
            contentType.textContent = result.content_type;
            
            // 更新过滤后的内容
            document.getElementById('filteredContent').textContent = result.filtered_content;
            
            // 更新移除的部分
            const removedSections = document.getElementById('removedSections');
            const removedList = document.getElementById('removedList');
            
            if (result.removed_sections && result.removed_sections.length > 0) {
                removedSections.style.display = 'block';
                removedList.innerHTML = '';
                result.removed_sections.forEach(section => {
                    const div = document.createElement('div');
                    div.className = 'removed-section';
                    div.textContent = section;
                    removedList.appendChild(div);
                });
            } else {
                removedSections.style.display = 'none';
            }
            
            // 显示提取的信息来源
            const sourceInfo = document.getElementById('sourceInfo');
            const sourceContent = document.getElementById('sourceContent');
            
            if (result.extracted_sources) {
                sourceInfo.style.display = 'block';
                let sourceHtml = '';
                
                const sources = result.extracted_sources;
                
                if (sources.urls && sources.urls.length > 0) {
                    sourceHtml += '<h6>URL来源:</h6><ul>';
                    sources.urls.forEach(url => {
                        sourceHtml += `<li><a href="${url.url}" target="_blank">${url.url}</a> (${url.source_type}, 可靠性: ${(url.reliability_score * 100).toFixed(0)}%)</li>`;
                    });
                    sourceHtml += '</ul>';
                }
                
                if (sources.citations && sources.citations.length > 0) {
                    sourceHtml += '<h6>引用来源:</h6><ul>';
                    sources.citations.forEach(citation => {
                        sourceHtml += `<li>${citation.source} (${citation.type}, 可靠性: ${(citation.reliability_score * 100).toFixed(0)}%)</li>`;
                    });
                    sourceHtml += '</ul>';
                }
                
                if (sources.academic_sources && sources.academic_sources.length > 0) {
                    sourceHtml += '<h6>学术来源:</h6><ul>';
                    sources.academic_sources.forEach(academic => {
                        sourceHtml += `<li>${academic.author} (${academic.type}, 可靠性: ${(academic.reliability_score * 100).toFixed(0)}%)</li>`;
                    });
                    sourceHtml += '</ul>';
                }
                
                if (sources.suggested_sources && sources.suggested_sources.length > 0) {
                    sourceHtml += '<h6>建议来源:</h6><ul>';
                    sources.suggested_sources.forEach(suggested => {
                        sourceHtml += `<li><a href="${suggested.url}" target="_blank">${suggested.name}</a> (${suggested.type}, 可靠性: ${(suggested.reliability * 100).toFixed(0)}%)</li>`;
                    });
                    sourceHtml += '</ul>';
                }
                
                if (sources.confidence_score !== undefined) {
                    sourceHtml += `<p><strong>信息来源置信度: ${(sources.confidence_score * 100).toFixed(0)}%</strong></p>`;
                }
                
                sourceContent.innerHTML = sourceHtml || '<p>未找到明确的信息来源</p>';
            } else {
                sourceInfo.style.display = 'none';
            }
            
            // 显示文档信息（如果有）
            if (result.document_info) {
                const docInfo = result.document_info;
                const summary = docInfo.summary;
                
                // 在结果卡片中添加文档信息
                const resultCard = document.getElementById('resultCard');
                let docInfoHtml = `
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6>文档信息</h6>
                            <div class="border p-3 bg-light rounded">
                                <p><strong>文件名:</strong> ${docInfo.filename}</p>
                                <p><strong>文件大小:</strong> ${(docInfo.file_size / 1024).toFixed(1)} KB</p>
                                <p><strong>文件类型:</strong> ${docInfo.file_type}</p>
                                <p><strong>字数统计:</strong> ${docInfo.word_count} 字</p>
                                <p><strong>段落数:</strong> ${summary.paragraph_count}</p>
                                <p><strong>预计阅读时间:</strong> ${summary.estimated_reading_time} 分钟</p>
                                <p><strong>关键信息数量:</strong> ${summary.key_info_count}</p>
                            </div>
                        </div>
                    </div>
                `;
                
                // 检查是否已经有文档信息区域
                let existingDocInfo = resultCard.querySelector('.document-info');
                if (existingDocInfo) {
                    existingDocInfo.remove();
                }
                
                // 添加文档信息到结果卡片
                const cardBody = resultCard.querySelector('.card-body');
                const docInfoDiv = document.createElement('div');
                docInfoDiv.className = 'document-info';
                docInfoDiv.innerHTML = docInfoHtml;
                cardBody.appendChild(docInfoDiv);
            }
        }
        
        // URL分析表单处理
        document.getElementById('urlForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const url = document.getElementById('urlInput').value;
            
            if (!url.trim()) {
                alert('请输入要分析的URL');
                return;
            }
            
            // 显示加载状态
            const submitBtn = document.querySelector('#urlForm button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.textContent = '分析中...';
            
            try {
                const response = await fetch('/api/analyze/url', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ url: url })
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    displayUrlResult(result);
                } else {
                    alert('URL分析失败: ' + (result.error || '未知错误'));
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            } finally {
                submitBtn.disabled = false;
                submitBtn.textContent = '分析URL内容';
            }
        });
        
        // 来源提取表单处理
        document.getElementById('sourcesForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const content = document.getElementById('sourcesContent').value;
            
            if (!content.trim()) {
                alert('请输入要提取来源的内容');
                return;
            }
            
            // 显示加载状态
            const submitBtn = document.querySelector('#sourcesForm button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.textContent = '提取中...';
            
            try {
                const response = await fetch('/api/extract/sources', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ content: content })
                });
                
                const result = await response.json();
                
                if (response.ok) {
                    displaySourcesResult(result);
                } else {
                    alert('来源提取失败: ' + (result.error || '未知错误'));
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            } finally {
                submitBtn.disabled = false;
                submitBtn.textContent = '提取信息来源';
            }
        });
        
        // AI检测表单处理
        document.getElementById('aiForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const content = document.getElementById('aiContent').value;
            
            if (!content.trim()) {
                alert('请输入要检测的内容');
                return;
            }
            
            // 显示加载状态
            const submitBtn = document.querySelector('#aiForm button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="loading"></span> 检测中...';
            
            try {
                const response = await fetch('/api/detect/ai', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ content: content })
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    displayAiResult(result);
                } else {
                    alert('AI检测失败: ' + (result.error || '未知错误'));
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            } finally {
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        });
        
        function displayAiResult(result) {
            // 显示结果卡片
            document.getElementById('aiResultCard').style.display = 'block';
            
            // 更新AI生成概率
            const aiProgress = document.getElementById('aiDetectProgress');
            const aiPercent = Math.round(result.ai_probability * 100);
            aiProgress.style.width = aiPercent + '%';
            aiProgress.textContent = aiPercent + '%';
            
            // 更新AI概率显示
            const aiProbability = document.getElementById('aiDetectProbability');
            aiProbability.textContent = `${(result.ai_probability * 100).toFixed(1)}%`;
            
            // 设置AI进度条颜色
            if (aiPercent > 80) {
                aiProgress.className = 'progress-bar bg-danger';
            } else if (aiPercent > 50) {
                aiProgress.className = 'progress-bar bg-warning';
            } else {
                aiProgress.className = 'progress-bar bg-success';
            }
            
            // 更新置信度
            const confidenceProgress = document.getElementById('aiConfidenceProgress');
            const confidencePercent = Math.round(result.confidence * 100);
            confidenceProgress.style.width = confidencePercent + '%';
            confidenceProgress.textContent = confidencePercent + '%';
            
            // 更新置信度显示
            const confidenceScore = document.getElementById('aiConfidenceScore');
            confidenceScore.textContent = `${(result.confidence * 100).toFixed(1)}%`;
            
            // 设置置信度进度条颜色
            if (confidencePercent > 70) {
                confidenceProgress.className = 'progress-bar bg-success';
            } else if (confidencePercent > 40) {
                confidenceProgress.className = 'progress-bar bg-warning';
            } else {
                confidenceProgress.className = 'progress-bar bg-danger';
            }
            
            // 更新内容类型
            const contentType = document.getElementById('aiContentType');
            contentType.textContent = result.content_type;
            
            // 设置内容类型徽章颜色
            if (result.content_type === 'ai_generated') {
                contentType.className = 'badge bg-danger';
            } else if (result.content_type === 'human_written') {
                contentType.className = 'badge bg-success';
            } else {
                contentType.className = 'badge bg-warning';
            }
            
            // 更新检测方法
            const detectionMethod = document.getElementById('aiDetectionMethod');
            const methodText = result.detection_method === 'zerogpt_api' ? 'Zerogpt API' : '本地启发式检测';
            detectionMethod.innerHTML = `
                <div class="row">
                    <div class="col-md-4">
                        <strong><i class="fas fa-cogs"></i> 检测方法:</strong><br>
                        <span class="badge ${result.detection_method === 'zerogpt_api' ? 'bg-success' : 'bg-warning'}">${methodText}</span>
                    </div>
                    <div class="col-md-4">
                        <strong><i class="fas fa-brain"></i> 使用模型:</strong><br>
                        <span class="text-muted">${result.model_used}</span>
                    </div>
                    <div class="col-md-4">
                        <strong><i class="fas fa-ruler"></i> 内容长度:</strong><br>
                        <span class="text-muted">${result.original_content_length} 字符</span>
                    </div>
                </div>
            `;
            
            // 更新详细信息
            const details = document.getElementById('aiDetails');
            let detailsHtml = `
                <div class="row">
                    <div class="col-md-6">
                        <strong><i class="fas fa-robot"></i> AI生成概率:</strong><br>
                        <span class="text-primary">${(result.ai_probability * 100).toFixed(1)}%</span>
                    </div>
                    <div class="col-md-6">
                        <strong><i class="fas fa-bullseye"></i> 检测置信度:</strong><br>
                        <span class="text-primary">${(result.confidence * 100).toFixed(1)}%</span>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-6">
                        <strong><i class="fas fa-tag"></i> 内容类型:</strong><br>
                        <span class="badge ${result.content_type === 'ai_generated' ? 'bg-danger' : result.content_type === 'human_written' ? 'bg-success' : 'bg-warning'}">${result.content_type}</span>
                    </div>
                    <div class="col-md-6">
                        <strong><i class="fas fa-clock"></i> 检测时间:</strong><br>
                        <span class="text-muted">${result.timestamp ? new Date(result.timestamp).toLocaleString() : '未知'}</span>
                    </div>
                </div>
            `;
            
            // 如果是本地检测，显示额外信息
            if (result.detection_method === 'local_heuristic' && result.ai_indicators_found !== undefined) {
                detailsHtml += `
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <strong><i class="fas fa-search"></i> 发现的AI指标:</strong><br>
                            <span class="text-warning">${result.ai_indicators_found}</span>
                        </div>
                        <div class="col-md-6">
                            <strong><i class="fas fa-list"></i> 总指标数:</strong><br>
                            <span class="text-muted">${result.total_indicators}</span>
                        </div>
                    </div>
                `;
            }
            
            // 显示时间戳已经在上面显示了，这里移除重复
            
            details.innerHTML = detailsHtml;
        }
        
        function displayUrlResult(result) {
            // 显示结果卡片
            document.getElementById('urlResultCard').style.display = 'block';
            
            // 更新网页信息
            const urlContentInfo = document.getElementById('urlContentInfo');
            const urlTitle = result.title || 'N/A';
            const urlSummary = result.content_summary || 'N/A';
            
            urlContentInfo.innerHTML = `
                <p><strong>标题:</strong> ${urlTitle}</p>
                <p><strong>内容类型:</strong> ${result.content_type}</p>
                <p><strong>字数统计:</strong> ${result.metadata.word_count || 0} 字</p>
                <p><strong>域名:</strong> ${result.metadata.domain || 'N/A'}</p>
            `;
            
            // 更新可靠性评分
            const urlReliabilityProgress = document.getElementById('urlReliabilityProgress');
            const urlReliabilityScore = document.getElementById('urlReliabilityScore');
            const urlReliabilityPercent = Math.round(result.reliability_score * 100);
            urlReliabilityProgress.style.width = urlReliabilityPercent + '%';
            urlReliabilityProgress.textContent = urlReliabilityPercent + '%';
            urlReliabilityScore.textContent = `${(result.reliability_score * 100).toFixed(1)}%`;
            
            // 设置可靠性进度条颜色
            if (urlReliabilityPercent > 70) {
                urlReliabilityProgress.className = 'progress-bar bg-success';
            } else if (urlReliabilityPercent > 40) {
                urlReliabilityProgress.className = 'progress-bar bg-warning';
            } else {
                urlReliabilityProgress.className = 'progress-bar bg-danger';
            }
            
            // 更新AI生成概率
            const urlAiProgress = document.getElementById('urlAiProgress');
            const urlAiScore = document.getElementById('urlAiScore');
            const urlAiPercent = Math.round(result.ai_indicators.ai_probability * 100);
            urlAiProgress.style.width = urlAiPercent + '%';
            urlAiProgress.textContent = urlAiPercent + '%';
            urlAiScore.textContent = `${(result.ai_indicators.ai_probability * 100).toFixed(1)}%`;
            
            // 设置AI进度条颜色
            if (urlAiPercent > 80) {
                urlAiProgress.className = 'progress-bar bg-danger';
            } else if (urlAiPercent > 50) {
                urlAiProgress.className = 'progress-bar bg-warning';
            } else {
                urlAiProgress.className = 'progress-bar bg-success';
            }
            
            // 更新关键信息
            const urlKeyInfo = document.getElementById('urlKeyInfo');
            const keyInformation = result.key_information || {};
            urlKeyInfo.innerHTML = `
                <p><strong>日期:</strong> ${keyInformation.dates ? keyInformation.dates.join(', ') : 'N/A'}</p>
                <p><strong>数字/统计:</strong> ${keyInformation.numbers ? keyInformation.numbers.join(', ') : 'N/A'}</p>
                <p><strong>人名:</strong> ${keyInformation.names ? keyInformation.names.join(', ') : 'N/A'}</p>
                <p><strong>句子数:</strong> ${keyInformation.sentence_count || 0}</p>
            `;
            
            // 更新内容摘要
            const urlSummaryDiv = document.getElementById('urlSummary');
            urlSummaryDiv.innerHTML = `
                <p><strong>内容摘要:</strong> ${urlSummary}</p>
            `;
        }
        
        function displaySourcesResult(result) {
            // 显示结果卡片
            document.getElementById('sourcesResultCard').style.display = 'block';
            
            // 更新置信度评分
            const confidenceProgress = document.getElementById('sourcesConfidenceProgress');
            const confidencePercent = Math.round(result.confidence_score * 100);
            confidenceProgress.style.width = confidencePercent + '%';
            confidenceProgress.textContent = confidencePercent + '%';
            
            // 设置置信度进度条颜色
            if (confidencePercent > 70) {
                confidenceProgress.className = 'progress-bar bg-success';
            } else if (confidencePercent > 40) {
                confidenceProgress.className = 'progress-bar bg-warning';
            } else {
                confidenceProgress.className = 'progress-bar bg-danger';
            }
            
            // 更新URL来源
            const urlsDiv = document.getElementById('sourcesUrls');
            if (result.urls && result.urls.length > 0) {
                let urlsHtml = '';
                result.urls.forEach((url, index) => {
                    urlsHtml += `<div class="mb-2 p-2 border rounded">`;
                    urlsHtml += `<p><strong>URL ${index + 1}:</strong> <a href="${url.url}" target="_blank">${url.url}</a></p>`;
                    urlsHtml += `<p><strong>域名:</strong> ${url.domain}</p>`;
                    urlsHtml += `<p><strong>来源类型:</strong> ${url.source_type}</p>`;
                    urlsHtml += `<p><strong>可靠性评分:</strong> ${(url.reliability_score * 100).toFixed(1)}%</p>`;
                    
                    if (url.content_analysis) {
                        urlsHtml += `<p><strong>内容类型:</strong> ${url.content_type}</p>`;
                        urlsHtml += `<p><strong>内容可靠性:</strong> ${(url.content_reliability * 100).toFixed(1)}%</p>`;
                        urlsHtml += `<p><strong>AI生成概率:</strong> ${(url.ai_probability * 100).toFixed(1)}%</p>`;
                        urlsHtml += `<p><strong>内容摘要:</strong> ${url.content_summary}</p>`;
                    } else if (url.content_analysis_error) {
                        urlsHtml += `<p><strong>内容分析错误:</strong> ${url.content_analysis_error}</p>`;
                    }
                    urlsHtml += `</div>`;
                });
                urlsDiv.innerHTML = urlsHtml;
            } else {
                urlsDiv.innerHTML = '<p class="text-muted">未发现URL来源</p>';
            }
            
            // 更新引用
            const citationsDiv = document.getElementById('sourcesCitations');
            if (result.citations && result.citations.length > 0) {
                let citationsHtml = '';
                result.citations.forEach((citation, index) => {
                    citationsHtml += `<div class="mb-2 p-2 border rounded">`;
                    citationsHtml += `<p><strong>引用 ${index + 1}:</strong> ${citation.source}</p>`;
                    citationsHtml += `<p><strong>类型:</strong> ${citation.type}</p>`;
                    citationsHtml += `<p><strong>可靠性评分:</strong> ${(citation.reliability_score * 100).toFixed(1)}%</p>`;
                    citationsHtml += `</div>`;
                });
                citationsDiv.innerHTML = citationsHtml;
            } else {
                citationsDiv.innerHTML = '<p class="text-muted">未发现引用</p>';
            }
            
            // 更新学术来源
            const academicDiv = document.getElementById('sourcesAcademic');
            if (result.academic_sources && result.academic_sources.length > 0) {
                let academicHtml = '';
                result.academic_sources.forEach((academic, index) => {
                    academicHtml += `<div class="mb-2 p-2 border rounded">`;
                    academicHtml += `<p><strong>学术来源 ${index + 1}:</strong> ${academic.author}</p>`;
                    academicHtml += `<p><strong>类型:</strong> ${academic.type}</p>`;
                    academicHtml += `<p><strong>可靠性评分:</strong> ${(academic.reliability_score * 100).toFixed(1)}%</p>`;
                    academicHtml += `</div>`;
                });
                academicDiv.innerHTML = academicHtml;
            } else {
                academicDiv.innerHTML = '<p class="text-muted">未发现学术来源</p>';
            }
        }
    </script>
</body>
</html>